<template>
  <div class="home-center-view">
    <!-- 我的 -->
    <div class="we" v-if="token">
      <div class="we-my">
        <span>我的</span>
        <img src="../assets/06.png" />
      </div>
      <!-- 头像 -->
      <div class="avatar">
        <van-image round width="100" height="100" cover :src="src" />
        <van-uploader
          :before-read="beforeRead"
          :after-read="afterRead"
          result-type="file"
          max-count="1"
          v-model="fileList"
          :preview-image="false"
        >
          <van-button icon="plus" color="#7232dd" plain round class="avatar-btn"
            >上传头像</van-button
          >
        </van-uploader>
      </div>
      <!-- 我的订单 -->
      <div class="orders">
        <p class="weord">我的订单</p>
        <div class="ord-mov">
          <div class="ord-cen">
            <img src="../assets/08.jpg" />
            <nav>电影</nav>
          </div>
          <div class="ord-cen">
            <img src="../assets/09.jpg" />
            <nav>商城</nav>
          </div>
        </div>
      </div>
      <!-- 优惠折扣 -->
      <ul>
        <li>优惠卷 &nbsp; ></li>
        <li>折扣卡 &nbsp; ></li>
      </ul>
      <van-button type="info" class="updatepwd" @click="showPopup"
        >修改密码</van-button
      >
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-form @submit="onSubmit" style="margin-top: 40px">
          <van-field
            v-model="password"
            type="password"
            name="新密码"
            label="新密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-popup>
      <!-- 电话 -->
      <div class="phone">
        <p>&copy;猫眼电影 客服电话:</p>
        <p>1010-5335</p>
      </div>
    </div>
    <div v-else>
      <van-empty description="您还没有登录,请登录">
        <van-button
          round
          type="danger"
          class="bottom-button"
          @click="
            $router.push({ name: 'login', query: { redirect: '/center' } })
          "
          >去登录</van-button
        >
      </van-empty>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  Empty,
  Button,
  Uploader,
  Image as VanImage,
  Toast,
  Popup,
  Form,
  Field,
} from "vant";
import myAxios from "@/utils/request";
export default {
  name: "HomeCenterView",
  components: {
    [Empty.name]: Empty,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [VanImage.name]: VanImage,
    [Popup.name]: Popup,
    [Form.name]: Form,
    [Field.name]: Field,
  },
  data() {
    return {
      src1: "",
      fileList: [],
      show: false,
      password: "",
    };
  },
  computed: {
    ...mapState(["token"]),
    src() {
      let img = this.src1 || localStorage.getItem("src");
      return img;
    },
  },
  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file.type == "image/jpeg" || file.type == "image/png") {
        return true;
      } else {
        Toast("请上传 jpg/png 格式图片");
        return false;
      }
    },
    afterRead() {
      // 此时可以自行将文件上传至服务器
      const formData = new FormData();
      formData.append("avatar", this.fileList[0].file);
      myAxios
        .post("/base/user/upload-avatar", formData, {
          // 其余配置项
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(({ data }) => {
          localStorage.setItem("src", data.data);
          this.src1 = data.data;
        })
        .catch((error) => {
          console.log("111", error);
        });
    },
    showPopup() {
      this.show = true;
    },
    onSubmit() {
      myAxios
        .post("/base/user/password", {
          password: this.password,
        })
        .then(({ data }) => {
          Toast.success(data.msg);
          this.password = "";
          this.show = false;
        })
        .catch(({ data }) => {
          Toast.fail(data.msg);
          this.password = "";
          this.show = false;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.home-center-view {
  display: flex;
  flex-direction: column;
}
.we {
  width: 100%;
  height: 260px;
  background-color: #e74948;
  .we-my {
    width: 100%;
    height: 50px;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    span {
      font-size: 20px;
    }
    img {
      width: 20px;
      position: absolute;
      right: 10px;
      top: 57%;
    }
  }
  .avatar {
    display: flex;
    width: 100%;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar-btn {
      margin-top: 20px;
    }
  }
  .orders {
    width: 100%;
    height: 150px;
    border-top: 10px solid #f4f4f4;
    border-bottom: 10px solid #f4f4f4;
    .weord {
      font-size: 14px;
      text-align: center;
    }
    .ord-mov {
      display: flex;
      width: 100%;
      height: 100px;
      justify-content: space-around;
      align-items: center;
      .ord-cen {
        display: flex;
        flex-direction: column;
        width: 50px;
        font-size: 12px;
        height: 80px;
        justify-content: space-between;
        align-items: center;
        img {
          width: 100%;
        }
      }
    }
  }
  ul {
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    li {
      font-size: 14px;
      color: #6f6f6f;
      width: 335px;
      height: 40px;
      line-height: 40px;
      margin-left: 20px;
      border-bottom: 1px solid #f4f4f4;
    }
  }
  .updatepwd {
    margin-left: 150px;
    margin-top: 10px;
  }
  .phone {
    margin-top: 25px;
    p:nth-child(1) {
      font-size: 12px;
      color: #a9a9a9;
      float: left;
      margin-left: 100px;
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #e7a90a;
      float: left;
      margin-left: 5px;
    }
  }
}
.bottom-button {
  width: 160px;
  height: 40px;
}
</style>
